<template>
  <div class="wallet-box">
    <button class="buy-btn wallet-btn" @click="connect" v-if="!address">
      连接钱包
    </button>
    <div v-else class="wallet-connected">
      <span class="wallet-status-dot"></span>
      <span>已连接：</span>
      <span class="wallet-tag">{{ shortAddress(address) }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const address = ref("");
onMounted(() => { getAddress(); window.ethereum?.on("accountsChanged", getAddress); });
async function connect() {
  if (!window.ethereum) return alert("请先安装MetaMask");
  await window.ethereum.request({ method: 'eth_requestAccounts' });
  getAddress();
}
async function getAddress() {
  if (window.ethereum) {
    const addrs = await window.ethereum.request({ method: 'eth_accounts' });
    address.value = addrs?.[0] || "";
  }
}
function shortAddress(addr) {
  return addr ? addr.slice(0,6) + "..." + addr.slice(-4) : "";
}
</script>

<style scoped>
.wallet-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 54px;
  padding: 18px 0 12px 0;
  /* 可根据实际页面决定左右间距 */
}

/* 按钮统一商务风 */
.buy-btn, .wallet-btn {
  background: #376ee6;
  color: #fff;
  font-size: 1.06em;
  font-weight: 600;
  border: none;
  border-radius: 13px;
  padding: 10px 32px;
  box-shadow: 0 1px 3px rgba(80,120,200,0.08);
  cursor: pointer;
  transition: background .17s, box-shadow .15s, opacity .11s;
  outline: none;
  letter-spacing: 1px;
}
.buy-btn:hover:enabled, .wallet-btn:hover:enabled {
  background: #2656ba;
  box-shadow: 0 3px 10px rgba(80,120,200,0.15);
}

/* 已连接样式 */
.wallet-connected {
  display: flex;
  align-items: center;
  background: #f5f7fb;
  border-radius: 12px;
  box-shadow: 0 1px 7px rgba(50,70,120,0.04);
  color: #26468c;
  font-size: 1.07em;
  padding: 7px 19px 7px 14px;
  font-weight: 500;
  gap: 7px;
  min-width: 0;
}

/* 绿色在线点 */
.wallet-status-dot {
  display: inline-block;
  width: 0.93em;
  height: 0.93em;
  border-radius: 50%;
  background: #29c771;
  margin-right: 2px;
  box-shadow: 0 1.5px 3px #97f3ca44;
}

/* 地址短tag风格 */
.wallet-tag {
  background: #e9eef6;
  color: #2656ba;
  padding: 2.5px 9px 2.5px 8px;
  border-radius: 9px;
  font-size: .97em;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .wallet-box { justify-content: center; padding: 12px 0 9px 0;}
  .wallet-btn { width: 96vw; max-width: 390px;}
  .wallet-connected { font-size: .98em; padding: 5.5px 10px 5.5px 7px;}
}
</style>
